<div hidden aria-hidden="true">
    <div class="pf-c-backdrop">
        <div class="pf-l-bullseye">
            <div class="pf-c-modal-box pf-m-md pf-m-align-top" role="dialog" aria-modal="true">
                <header class="pf-c-modal-box__header">
                    <h1 class="pf-c-modal-box__title realms-op-title"></h4>
                </header>
                <div class="pf-c-modal-box__body">
                    <div class="realms-op-fields">
                      <div class="realms-op-leave-only-row">
                        <form class="ct-form">
                          <label class="control-label" for="realms-op-info-domain" translate="yes">Domain</label>
                          <span id="realms-op-info-domain"></span>

                          <label class="control-label" for="realms-op-info-login-format" translate="yes">Login format</label>
                          <span id="realms-op-info-login-format"></span>

                          <label class="control-label" for="realms-op-info-server-sw" translate="yes">Server software</label>
                          <span id="realms-op-info-server-sw"></span>

                          <label class="control-label" for="realms-op-info-client-sw" translate="yes">Client software</label>
                          <span id="realms-op-info-client-sw"></span>
                        </form>

                        <a href="#" id="realms-op-leave-toggle" translate="yes">Leave domain</a>
                        <span id="realms-op-leave-caret" class="fa fa-caret-right"></span>
                        <div id="realms-op-alert" class="alert alert-warning" hidden>
                          <div translate="yes">After leaving the domain, only users with local credentials will be able to log into this machine. This may also affect other services as DNS resolution settings and the list of trusted CAs may change.</div>
                          <button class="pf-c-button pf-m-danger realms-op-leave" type="submit" translate="yes">Leave domain</button>
                        </div>
                      </div>

                      <form class="ct-form realms-op-join-only">
                        <label class="control-label" for="realms-op-address" translate="yes">Domain address</label>

                        <div class="ct-validation-wrapper">
                          <input id="realms-op-address" class="realms-op-field form-control" type="text" value="" />

                          <div class="help-block">
                            <span class="realms-op-address-spinner" hidden></span>
                            <span class="realms-op-address-error"></span>
                          </div>
                        </div>

                        <label class="control-label realm-active-directory-only" for="realms-op-computer-ou" translate="yes">Computer OU</label>
                        <input id="realms-op-computer-ou" class="realms-op-field form-control realm-active-directory-only" type="text" value=""/>

                        <label class="control-label" for="realms-op-auth" translate="yes">Authentication</label>
                        <div id="realms-op-auth" class="btn-group bootstrap-select dropdown form-control">
                          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                              <span class="pull-left"></span>
                              <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
                          </button>
                          <ul class="dropdown-menu" />
                        </div>

                        <label class="control-label" for="realms-op-user" translate="yes">User name</label>
                        <input id="realms-op-user" class="realms-op-field form-control" type="text" value=""/>

                        <label class="control-label" for="realms-op-user-password" translate="yes">User password</label>
                        <input id="realms-op-user-password" class="realms-op-field form-control" type="password" value=""/>

                        <label class="control-label" for="realms-op-admin" translate="yes">Domain administrator name</label>
                        <input id="realms-op-admin" class="realms-op-field form-control" type="text" value=""/>

                        <label class="control-label" for="realms-op-admin-password" translate="yes">Domain administrator password</label>
                        <input id="realms-op-admin-password" class="realms-op-field form-control" type="password" value=""/>

                        <label class="control-label" for="realms-op-ot-password" translate="yes">One time password</label>
                        <input id="realms-op-ot-password" class="realms-op-field form-control" type="password" value=""/>
                      </form>
                      <pre class="realms-op-diagnostics" hidden></pre>
                    </div>
                </div>
                <footer class="pf-c-modal-box__footer">
                    <div class="modal-footer">
                        <div class="pf-c-alert pf-m-danger pf-m-inline realms-op-error" aria-label="inline danger alert">
                            <div class="pf-c-alert__icon">
                            <span class="fa fa-exclamation-circle"></span>
                        </div>
                        <h4 class="pf-c-alert__title realms-op-message"></h4>
                    </div>
                    <button class="pf-c-button pf-m-primary pf-m-progress pf-m-in-progress realms-op-apply">
                        <span class="realms-op-spinner pf-c-button__progress">
                            <span class="pf-c-spinner pf-m-md" role="progressbar" aria-valuetext="Loading...">
                                <span class="pf-c-spinner__clipper"></span>
                                <span class="pf-c-spinner__lead-ball"></span>
                                <span class="pf-c-spinner__tail-ball"></span>
                            </span>
                        </span>
                        <span translate="yes">Next</span>
                    </button>
                    <button class="pf-c-button pf-m-link realms-op-cancel" translate="yes">Cancel</button>
                    <span class="realms-op-wait-message" translate="yes" hidden>This may take a while</span>
                </footer>
            </div>
        </div>
    </div>
</div>
